import {Image, StyleSheet, View, Text, TouchableOpacity, TextInput, FlatList} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useRef, useState} from "react";
import searchGroupIcon from "@/assets/images/chatIcon/searchGroupIcon.png"
import avator from "@/assets/images/me/avator.png"
import {useConversationStore} from "@/hooks/im/conversation";

export default function groupAdminScreen() {

    const router = useRouter();
    const inptRef = useRef(null);

    const [visi, setVisi] = useState(false);
    const [inpValue, setInpValue] = useState("");
    const [list, setList] = useState([]);

    const currentGroupList = useConversationStore((state) => state.currentGroupList);
    const setCurrentGroupListFuc = useConversationStore((state) => state.setCurrentGroupListFuc);


    useEffect(() => {
       const lists = currentGroupList.map((item, index) => {
           if (item.roleLevel == 20) {
               return item
           };
       })
        setList(lists);
    }, []);

    const selectAdmin = function (id) {
        const groupList = currentGroupList;
        const index = groupList.findIndex((item) => item.userID == id);
        Reflect.set(groupList[index], "select", true);
        router.back();
        setCurrentGroupListFuc(groupList);
    };

    const renderItem = ({ item }) => {
        return (
            (!item?.select && item?.roleLevel == 20) && (
                <TouchableOpacity onPress={() => selectAdmin(item.userID)}>
                    <View style={styles.groupListItem}>
                        <View style={styles.groupListLeft}>
                            <View style={styles.avator}>
                                <Image source={avator} style={{ width: "100%", height: "100%" }} />
                            </View>
                            <View style={styles.name}>
                                <Text style={styles.nameText}>{ item?.nickname }</Text>
                            </View>
                        </View>
                        {/*<View>*/}
                        {/*    <Text style={styles.root}>群主</Text>*/}
                        {/*</View>*/}
                    </View>
                </TouchableOpacity>
            )
        )
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#FFF" }}>
            <Stack.Screen
                options={{
                    title: '添加管理员', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#FFF', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={{ paddingHorizontal: 12, flex: 1 }}>
                <View style={{flexDirection: "row", alignItems: "center" }}>
                    <View style={styles.searchWrap}>
                        <View style={styles.searchIcon}>
                            <Image source={searchGroupIcon} style={{ width: "100%", height: "100%" }} />
                        </View>
                        <TextInput
                            ref={inptRef}
                            placeholder={"请输入搜索内容"}
                            style={styles.inpt}
                            value={inpValue}
                            onChangeText={(vl) => setInpValue(vl)}
                            onFocus={() => setVisi(true)}
                            onBlur={() => setVisi(false)}
                            clearButtonMode={"while-editing"}
                        />
                    </View>
                    {
                        visi && (
                            <TouchableOpacity onPress={() => {
                                setVisi(false);
                                inptRef.current.blur();
                            }}>
                                <View style={styles.cancelWrap}>
                                    <Text style={styles.cancel}>取消</Text>
                                </View>
                            </TouchableOpacity>
                        )
                    }
                </View>
                <FlatList
                    data={list}
                    renderItem={renderItem}
                />
            </View>
        </View>

    );
}

const styles = StyleSheet.create({
    searchWrap: {
        paddingVertical: 11,
        paddingHorizontal: 12,
        flexDirection:"row",
        alignItems: "center",
        backgroundColor: "#F7F8F9",
        flex: 1,
        borderRadius: 18,
    },
    searchIcon: {
        width: 14,
        height: 14,
        marginRight: 4,
    },
    inpt: {
        flex:1,
    },
    groupListLeft: {
        flexDirection: "row",
        alignItems: "center",
        flex: 1,
    },
    groupListItem: {
        flexDirection: "row",
        alignItems: "center",
        marginTop: 16,
    },
    avator: {
        width: 44,
        height: 44,
    },
    name: {
        marginLeft: 10,
    },
    nameText: {
        fontStyle: "normal",
        color: "#2A2B30",
        fontFamily: "PingFang SC, PingFang SC",
    },
    root: {
        color: "#C0C3CE"
    },
    cancelWrap: {
        marginLeft: 16,
    },
    cancel: {
        color: "#9C9EAC"
    },
});
